<template>
  <div class="">
    <!--pc 客连客-->
    <div class="pc_kelianke_page">
      <messageBoard></messageBoard>
      <modalAgent></modalAgent>
      <!--banner-->
      <div class="banner_huoke">
        <img src="http://image.xuemei99.com/banner_pic_kelianke_new.jpg" alt="">
        <button type="button" class="banner_open_btn" data-toggle="modal" data-target="#myModal"></button>
      </div>

      <!--创建客连客店铺 creat_shop-->
      <div class="item_wei_shop bg_fff">
        <div class="creat_shop_box row">
          <div class="col-md-7 text-right creat_img_box"><img src="http://image.xuemei99.com/establish_pic_kelianke.png" alt=""></div>
          <div class="col-md-5 text-left">
            <div class="creat_text_box">
              <p class="font_28">创建客连客店铺</p>
              <p class="col_999 font_14">商家可以在学妹客连客平台创建属于自己的店铺，展示自己店内的形象，推送店内的卡券等。</p>
            </div>
          </div>
        </div>
      </div>

      <!--寻找商家合作 creat_shop-->
      <div class="item_wei_shop bg_F4F6F9">
        <div class="creat_shop_box row">
          <div class="col-md-5">
            <div class="creat_text_box float_right text-left">
              <p class="font_28">寻找商家合作</p>
              <p class="col_999 font_14">商家在学妹客连客平台发布合作消息，如有觉得合适的项目可找商家详谈。</p>
            </div>
          </div>
          <div class="col-md-7 text-left creat_img_box"><img src="http://image.xuemei99.com/find_pic_kelianke.png" alt=""></div>
        </div>
      </div>

      <!--创建店铺卡券 creat_shop-->
      <div class="item_wei_shop bg_fff">
        <div class="creat_shop_box row">
          <div class="col-md-7 text-right creat_img_box"><img src="http://image.xuemei99.com/ticket_pic_kelianke.png" alt=""></div>
          <div class="col-md-5 text-left">
            <div class="creat_text_box">
              <p class="font_28">创建店铺卡券</p>
              <p class="col_999 font_14">学妹客连客平台具备卡券系统，店家可自行添加卡券，与其他门店进行联合活动。</p>
            </div>
          </div>
        </div>
      </div>

      <!--与商家洽谈合作 creat_shop-->
      <div class="item_wei_shop bg_F4F6F9">
        <div class="creat_shop_box row">
          <div class="col-md-5">
            <div class="creat_text_box float_right text-right">
              <p class="font_28">与商家洽谈合作</p>
              <p class="col_999 font_14">如有找到适合联合活动的商家，可在消息板块与对方详谈进行合作，随时交流随时合作。</p>
            </div>
          </div>
          <div class="col-md-7 text-left creat_img_box"><img src="http://image.xuemei99.com/talk_pic_kelianke.png" alt=""></div>
        </div>
      </div>

      <!--管理我的店铺 creat_shop-->
      <div class="item_wei_shop bg_fff">
        <div class="creat_shop_box row">
          <div class="col-md-7 text-right creat_img_box"><img src="http://image.xuemei99.com/manage_pic_kelianke.png" alt=""></div>
          <div class="col-md-5 text-left">
            <div class="creat_text_box">
              <p class="font_28">管理我的店铺</p>
              <p class="col_999 font_14">在我的店铺中管理店铺，管理卡券，也可以将你的店铺名片展示以图片形式分享出去，吸引更多其他商家和客户</p>
            </div>
          </div>
        </div>
      </div>

      <!--体验与下载-->
      <div class="item_wei_shop bg_F4F6F9">
        <div class="width_1108 margin_0_auto">
          <p class="font_28">体验与下载</p>
          <div class="download_box text-center">
            <img src="http://image.xuemei99.com/code_pic_kelianke.png" alt="">
            <p class="font_14">扫码体验客连客模板小程序</p>
          </div>
        </div>
      </div>

      <!--销售宝开通流程 flow-->
      <div class="join_flow">
        <div class="width_1108 col_fff margin_0_auto">
          <p class="font_28">客连客开通流程</p>
          <div class="flow_box margin_top_60 clear">
            <div class="flow_img_box">
              <img src="http://image.xuemei99.com/inquiry_icon_huokebao.png" alt="">
              <p>查询加盟商</p>
            </div>
            <div class="flow_right_icon"></div>
            <div class="flow_img_box">
              <img src="http://image.xuemei99.com/contact_icon_huokebao.png" alt="">
              <p>联系加盟商</p>
            </div>
            <div class="flow_right_icon"></div>
            <div class="flow_img_box">
              <img src="http://image.xuemei99.com/pay_icon_huokebao.png" alt="">
              <p>付款签署协议</p>
            </div>
            <div class="flow_right_icon"></div>
            <div class="flow_img_box">
              <img src="http://image.xuemei99.com/use_icon_huokebao.png" alt="">
              <p>开通交付使用</p>
            </div>
          </div>
          <div class="text-center margin_top_60"><button type="button" class="join_daili_btn bg_2577EF" data-toggle="modal" data-target="#myModal">立即开通</button></div>
        </div>
      </div>

    </div>

    <!--mobile 客连客-->
    <div class="mobile_kelianke_page">
      <!--banner-->
      <div class="mobile_product_banner mobile_kelianke_baner_bg">
        <div class="col_fff border_0">
            <p class="mobile_banner_title">客连客</p>
            <p class="mobile_banner_sm_title">让商家和商家的顾客连通起来</p>
            <button type="button" class="bg_2577EF col_fff mobile_banner_btn" @click="mobile_shearch_agent">立即开通</button>
          </div>
      </div>

      <!--创建客连客店铺-->
      <div class="bg_fff mobile_huoke_item mobile_huoke_sm_shop">
        <div class="padding_left_15 padding_right_15 item_title_box">
          <p class="font_20">创建客连客店铺</p>
          <p class="col_666 font_14 margin_top_10">商家可以在学妹客连客平台创建属于自己的店铺，展示自己店内的形象，推送店内的卡券等。</p>
        </div>
        <img src="http://image.xuemei99.com/establish_pic_kelianke.png" alt="" class="margin_top_6">
      </div>

      <!--寻找商家合作-->
      <div class="bg_F4F6F9 mobile_huoke_item mobile_huoke_sm_shop">
        <div class="padding_left_15 padding_right_15 item_title_box">
          <p class="font_20">寻找商家合作</p>
          <p class="col_666 font_14 margin_top_10">商家在学妹客连客平台发布合作消息，如有觉得合适的项目可找商家详谈。</p>
        </div>
        <img src="http://image.xuemei99.com/find_pic_kelianke.png" alt="" class="margin_top_6">
      </div>

      <!--创建店铺卡券-->
      <div class="bg_fff mobile_huoke_item mobile_huoke_sm_shop">
        <div class="padding_left_15 padding_right_15 item_title_box">
          <p class="font_20">创建店铺卡券</p>
          <p class="col_666 font_14 margin_top_10">学妹客连客平台具备卡券系统，店家可自行添加卡券，与其他门店进行联合活动。</p>
        </div>
        <img src="http://image.xuemei99.com/ticket_pic_kelianke.png" alt="" class="margin_top_6">
      </div>

      <!--与商家洽谈合作-->
      <div class="bg_F4F6F9 mobile_huoke_item mobile_huoke_sm_shop">
        <div class="padding_left_15 padding_right_15 item_title_box">
          <p class="font_20">与商家洽谈合作</p>
          <p class="col_666 font_14 margin_top_10">如有找到适合联合活动的商家，可在消息板块与对方详谈进行合作，随时交流随时合作。</p>
        </div>
        <img src="http://image.xuemei99.com/talk_pic_kelianke.png" alt="" class="margin_top_6">
      </div>

      <!--管理我的店铺-->
      <div class="bg_fff mobile_huoke_item mobile_huoke_sm_shop">
        <div class="padding_left_15 padding_right_15 item_title_box">
          <p class="font_20">管理我的店铺</p>
          <p class="col_666 font_14 margin_top_10">在我的店铺中管理店铺，管理卡券，也可以将你的店铺名片展示以图片形式分享出去，吸引更多其他商家和客户</p>
        </div>
        <img src="http://image.xuemei99.com/manage_pic_kelianke.png" alt="" class="margin_top_6">
      </div>

      <!--体验与下载-->
      <div class="bg_F4F6F9 mobile_huoke_item mobile_huoke_sm_shop">
        <div class="padding_left_15 padding_right_15 item_title_box">
          <p class="font_20">体验与下载</p>
        </div>
        <img src="http://image.xuemei99.com/download_pic_kelianke.png" alt="" class="margin_top_6" style="width: 100%">
      </div>

      <!--客连客开通流程-->
      <div class="mobile_huoke_item mobile_huoke_sm_shop mobile_huoke_open_item">
        <div class="padding_left_15 padding_right_15 col_fff item_title_box">
          <p class="font_20">客连客开通流程</p>
        </div>
        <img src="http://image.xuemei99.com/open_pic_huokebao.png" alt="" class="margin_top_20" style="width: 100%">
        <button type="button" class="bg_2577EF col_fff font_14 margin_top_30 to_kelianke_btn" @click="mobile_shearch_agent">立即开通</button>
      </div>

      <!--移动端咨询加盟商弹框-->
      <mobileAgentModal :mobile-mask="mobile_agent_mask" v-on:succ="succ"></mobileAgentModal>
    </div>

    <!--底部-->
    <Foot></Foot>
  </div>
</template>

<script>
  import Foot from '@/components/foot/foot'
  import messageBoard from '@/components/messageBoard/messageBoard'
  import modalAgent from '@/components/modal/modal_agent'
  import mobileAgentModal from '@/components/modal/mobile_agent_modal'
  export default {
    name: '',
    components: {
      messageBoard,
      modalAgent,
      Foot,
      mobileAgentModal
    },
    methods: {
      /**
       * 移动端
       *点击立即开通
       * 查询加盟商
       * **/
      mobile_shearch_agent(){
        let that = this;
        that.mobile_agent_mask = true;
        $(".mobile_agent_modal").animate({"height": '476px'}, '500', 'swing');
      },

      /**
       * 子组件修改父组件数据回调函数
       * **/
      succ(data){
        this.mobile_agent_mask = false;
      }
    },
    data(){
      return {
        mobile_agent_mask: false
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .creat_img_box img{
    width: 460px;
  }
  .creat_text_box{
    width: 200px;
    margin-top: 130px;
  }
  .banner_huoke{
    position: relative;
  }
  .banner_open_btn{
    position: absolute;
    width: 130px;
    height: 38px;
    top: 63%;
    left: 46%;
    opacity: 0;
    z-index: 999;
  }
  .banner_huoke img{
    width: 100%;
  }
  .download_box{
    margin-top: 40px;
  }
  .download_box img{
    width: 200px;
    margin-bottom: 16px;
  }

  .mobile_huoke_sm_shop img{
    width: 65%;
  }
  .item_wei_shop{
    padding: 60px 0;
  }
  .download_ul li{
    width: 200px;
    margin-left: 100px;
  }
  .download_ul li:first-child{
    margin-left: 0;
  }
  .download_ul li img{
    width: 100%;
    height: 200px;
    margin-bottom: 16px;
  }

  .join_flow{
    background: url("http://image.xuemei99.com/process_bg_jiameng.jpg") no-repeat center;
    background-size: cover;
    padding: 80px 0;
  }
  .flow_box{
    padding-left: 20px;
    padding-right: 20px;
  }
  .flow_img_box,.flow_right_icon{
    float: left;
  }
  .flow_img_box{
    width: 120px;
  }
  .flow_img_box img{
    width: 120px;
    height: 120px;
  }
  .flow_img_box p{
    margin-top: 20px;
    font-size: 18px;
  }
  .flow_right_icon{
    width: calc(33.333% - 160px);
    width: -moz-calc(33.333% - 160px);
    width: -webkit-calc(33.333% - 160px);
    height: 120px;
    background: url("http://image.xuemei99.com/next_icon_jiameng.png") no-repeat center;
    background-size: 1em;
  }
  .join_daili_btn{
    width: 200px;
    height: 36px;
    line-height: 36px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
  }
  .mobile_kelianke_baner_bg{
    background-image: url("http://image.xuemei99.com/banner3_pic_home.jpg");
  }

</style>
